<template>
    <div>
      <Header :city="city"></Header>
      <home-swiper :List="swiperList"></home-swiper>
      <home-icons :List="iconList"></home-icons>
      <home-recommend :List="recommendList"></home-recommend>
      <home-weekend :List="weekendList"></home-weekend>
    </div>
</template>

<script>
import axios from 'axios'
import HomeWeekend from '@/components/Weekend.vue'
import HomeRecommend from '@/components/Recommend.vue'
import HomeIcons from '@/components/HomeIcons.vue'
import HomeSwiper from '@/components/HomeSwiper.vue'
import Header from '@/components/Header.vue'
export default {
    name:'Home',
    data () {
        return {
            city:'',
            swiperList: [],
            iconList: [],
            recommendList:[],
            weekendList:[]
        }
    },
    components:{
        Header,
        HomeSwiper,
        HomeIcons,
        HomeRecommend,
        HomeWeekend
    },
    mounted () {
       this.getHomeInfo()
    },
    methods:{
       getHomeInfo () {
           axios.get('/mock/index.json')
             .then(this.getHomeInfoSucc)
       },
       getHomeInfoSucc (res) {
           res = res.data
           if(res.ret && res.data) {
               const data = res.data
               this.city = data.city
               this.swiperList = data.swiperList
               this.iconList = data.iconList
               this.recommendList= data.recommendList
               this.weekendList = data.weekendList
           }
       }
    }
}
</script>

<style>

</style>